<template>
	<view class="content">
		<view class="mask" v-if="focus"></view>
		<view class="content-nav" :style="{
		paddingTop:statusBarHeight+'rpx'
		}">
			<view class="nav-avatar" @click="showUserInfo">
				<image :src="avatarUrl || defaultAvatar" alt="">
			</view>
			<view class="nav-title">
				CYQ's message board
			</view>
		</view>
		<!-- :style="{
			height:wrapHeight
		}" -->
		<view class="content-wrap">
			<view class="wrap-menu">
				<view class="menu-select">
					<view class="select-text">
						按时间（{{orderBy ? '正' :'倒'}}序）
					</view>
					<view class="select-icon" @click="changeSelect" :style="{
						transform: showSelect ? 'rotate(0deg)':'rotate(180deg)'
					}">
						<view class="iconfont icon-arrow-up-bold"></view>
					</view>
				</view>
				<view class="menu-info" @click="showAuthorInfo">
					<view class="iconfont icon-elipsis"></view>
				</view>
				<view class="select-option" :class="showSelect ? 'show' :'hide'">
					<view class="option-item" :class="orderBy ? 'active':''" @click="chooseSelect(1)">
						<view class="option-item-icon">
							<view class="iconfont icon-run-up"></view>
						</view>
						<view class="option-item-text">
							按时间（正序）
						</view>
					</view>
					<view class="option-item" :class="!orderBy ? 'active':''" @click="chooseSelect(2)">
						<view class="option-item-icon">
							<view class="iconfont icon-run-in"></view>
						</view>
						<view class="option-item-text">
							按时间（倒序）
						</view>
					</view>
				</view>
			</view>

			<view class="wrap-list">
				<view class="list-item" v-for="(i,index) in messageList" :key="index" :style="{
					background:getBackGround(index)
				}" @longpress="longPressItem(i)">
					<view class="item-top">
						<view class="item-top-avatar">
							<image :src="i.avatarUrl" alt="">
						</view>
						<view class="item-top-username">
							{{i.nickname}}
						</view>
					</view>
					<view class="item-mid">
						{{i.content}}
					</view>
					<view class="item-bottom">
						<view class="item-bottom-time">
							{{timeFromFun(new Date(i.createTime).getTime())}}
						</view>
						<view class="item-bottom-options">
							<view class="options-up">
								<view class="iconfont icon-smile"></view>
							</view>
							<view class="options-down">
								<view class="iconfont icon-cry"></view>
							</view>
						</view>
					</view>
					<view v-if="i.openid == openid" class="item-delete" @click="handelItemDelete(i)">
						<view class="iconfont icon-close"></view>
					</view>
				</view>
			</view>
		</view>

		<view class="input-box" v-if="focus">
			<view class="input">
				<textarea auto-height :focus="focus" @blur="blur" v-model="textareaValue" :show-confirm-bar="false"
					:cursor-spacing="100" placeholder-style="color:rgb(147, 144, 144)" placeholder="ta说..." />
			</view>
			<view class="submit-btn" @click="submitMessage">
				<view class="iconfont icon-24gf-paperPlane"></view>
			</view>
		</view>

		<view class="back-top" v-if="showbackTop" @click="handelBackTop">
			<view class="iconfont icon-top"></view>
		</view>
		<view class="submit-icon" :style="{
			bottom: showbackTop ? '180rpx' : '80rpx'
		}" @click="handelSubmit">
			<view class="iconfont icon-edit"></view>
		</view>
		<authorInfo ref="authorInfo"></authorInfo>
		<userInfo ref="userInfo" @updateInfo="updateInfo"></userInfo>
		<userAgree ref="userAgree"></userAgree>
	</view>
</template>

<script>
	import defaultAvatar from '../../static/authorAvatar.jpg'
	import authorInfo from '../../components/authorInfo.vue'
	import userInfo from '../../components/userInfo.vue'
	import userAgree from '../../components/userAgree.vue'
	import {
		timeFrom
	} from '../../utils/util.js'
	export default {
		components: {
			authorInfo,
			userInfo,
			userAgree,
		},
		data() {
			return {
				messageList: [],
				textareaValue: '',
				statusBarHeight: 0, // 状态栏高度
				wrapHeight: '', // 内容高度
				showSelect: false, // 显示排序select
				orderBy: true, // 排序
				showbackTop: false,
				focus: false,
				defaultAvatar,
				avatarUrl: '',
				openid: '',
				pageSize: 10,
				pageNum: 1
			}
		},
		onLoad() {
			const systemInfo = uni.getSystemInfoSync()
			this.statusBarHeight = systemInfo.statusBarHeight * 2
			let top = this.statusBarHeight + 100

			let openid = uni.getStorageSync('openid')
			let avatarUrl = uni.getStorageSync('avatarUrl')

			if (openid) {
				this.avatarUrl = avatarUrl
				this.openid = openid
			} else {
				this.$refs.userAgree.showModal = true
			}
			console.log(openid);
			uni.startPullDownRefresh()
		},
		onPageScroll(e) {
			this.showbackTop = e.scrollTop > 200
		},
		onReachBottom() {
			this.pageNum += 1;
			this.queryData()
		},
		onPullDownRefresh() {
			this.initData()
		},
		methods: {
			queryData() {
				uni.showLoading({
					title: '加载中...'
				})
				const that = this
				uniCloud.callFunction({
						name: 'message',
						data: {
							actionType: 'query',
							pageSize: this.pageSize,
							pageNum: this.pageNum,
							orderBy: this.orderBy ? 0 : 1
						}
					})
					.then(res => {
						console.log(res);
						uni.hideLoading()
						if (res.result.code === 200) {
							that.messageList = [...that.messageList, ...res.result.data.data]
							if (res.result.data.data.length === 0) {
								if (that.pageNum > 1) {
									that.pageNum -= 1;
								}
								uni.showToast({
									title: '没有更多了',
									icon: 'error'
								})
								return;
							}
						} else {
							uni.showToast({
								title: res.result.msg,
								icon: 'error'
							})
						}
					})

				uni.stopPullDownRefresh()
			},
			getBackGround(val) {
				let index = val % 10
				let color = [
					'linear-gradient(to right, #d1913c, #ffd194)',
					'linear-gradient(to right, #2193b0, #6dd5ed)',
					'linear-gradient(to right, #cb356b, #bd3f32)',
					'linear-gradient(to right, #ee9ca7, #ffdde1)',
					'linear-gradient(to right, #00c6ff, #0072ff)',
					'linear-gradient(to right, #acb6e5, #86fde8)',
					'linear-gradient(to right, #9796f0, #fbc7d4)',
					'linear-gradient(to right, #cc95c0, #dbd4b4, #7aa1d2)',
					'linear-gradient(to right, #3d7eaa, #ffe47a)',
					'linear-gradient(to right, #c9ffbf, #ffafbd)'
				]
				return color[index]
			},
			updateInfo() {
				let openid = uni.getStorageSync('openid')
				let avatarUrl = uni.getStorageSync('avatarUrl')

				if (openid) {
					this.avatarUrl = avatarUrl
					this.openid = openid
				}
			},
			changeSelect() {
				this.showSelect = !this.showSelect
			},
			chooseSelect(val) {
				if (val === 1 && !this.orderBy) {
					this.orderBy = true
				}
				if (val === 2 && this.orderBy) {
					this.orderBy = false
				}
				this.showSelect = false
				this.initData()
			},
			handelBackTop() {
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 300
				});
				setTimeout(() => {
					uni.startPullDownRefresh()
				}, 300)
			},
			handelSubmit() {
				let nickName = uni.getStorageSync('nickName')
				if (nickName) {
					this.focus = true
				} else {
					this.$refs.userInfo.showModal = true
				}
			},
			blur() {
				this.focus = false
			},
			showAuthorInfo() {
				this.$refs.authorInfo.showModal = true
			},
			showUserInfo() {
				this.$refs.userInfo.showModal = true
			},
			submitMessage() {
				console.log('this.textareaValue', this.textareaValue);
				if (this.textareaValue.trim() === '') {
					uni.showToast({
						title: '请输入内容',
						icon: 'error'
					})
					return
				}
				const that = this
				let nickName = uni.getStorageSync('nickName')
				let avatarUrl = uni.getStorageSync('avatarUrl')
				let openid = uni.getStorageSync('openid')

				// 敏感校验
				uniCloud.callFunction({
						name: 'commonUtils',
						data: {
							actionType: 'msgSecCheck',
							openid: openid,
							content: that.textareaValue
						}
					})
					.then(res => {
						console.log(res);
						if (res.result.code === 200) {
							uniCloud.callFunction({
									name: 'message',
									data: {
										actionType: 'add',
										nickname: nickName,
										avatarUrl: avatarUrl,
										openid: openid,
										content: this.textareaValue,
										createTime: new Date(),
									}
								})
								.then(res => {
									if (res.result.code === 200) {
										uni.showToast({
											title: res.result.msg,
											icon: 'success'
										})
										setTimeout(() => {
											that.initData()
										}, 1000)
									} else {
										uni.showToast({
											title: res.result.msg,
											icon: 'error'
										})
										that.focus = true
									}
								});
						} else {
							uni.showToast({
								title: '存在敏感词',
								icon: 'error'
							})
							that.focus = true
						}
					});
			},
			longPressItem(item) {
				console.log(item);
			},
			handelItemDelete(item) {
				const that = this
				uni.showModal({
					title: '提示',
					content: '确认删除？',
					success: function(res) {
						if (res.confirm) {
							uniCloud.callFunction({
									name: 'message',
									data: {
										actionType: 'del',
										id: item._id
									}
								})
								.then(res => {
									if (res.result.code === 200) {
										uni.showToast({
											title: res.result.msg,
											icon: 'success'
										})
										setTimeout(() => {
											that.initData()
										}, 1000)
									} else {
										uni.showToast({
											title: res.result.msg,
											icon: 'error'
										})
									}
								});
						} else if (res.cancel) {}
					}
				});
			},
			initData() {
				this.pageNum = 1
				this.pageSize = 10
				this.messageList = []
				this.textareaValue = ''
				this.queryData()
			},
			timeFromFun(e) {
				return timeFrom(e)
			}
		}
	}
</script>

<style lang="scss">
	.content {
		.mask {
			position: fixed;
			top: 0;
			left: 0;
			width: 100vw;
			height: 100vh;
			background: rgba(0, 0, 0, 0.5);
			z-index: 99;
		}

		.content-nav {
			padding: 30rpx 40rpx;
			height: 100rpx;
			display: flex;
			background-color: #efefef;
			position: fixed;
			width: 100%;
			z-index: 98;

			.nav-avatar {
				width: 100rpx;
				height: 100rpx;

				image {
					border-radius: 50%;
					width: 100%;
					height: 100%;
				}
			}

			.nav-title {
				font-size: 40rpx;
				line-height: 100rpx;
				margin-left: 30rpx;
			}
		}

		.content-wrap {
			background: #fff;
			padding: 30rpx;


			.wrap-menu {
				display: flex;
				height: 100rpx;
				position: relative;
				margin-top: 200rpx;

				.menu-select {
					display: flex;
					flex: 1;
					height: 100rpx;
					align-items: center;
					justify-content: space-between;
					border-radius: 50rpx;
					background: #efefef;
					padding: 0 30rpx;

					.select-text {
						font-size: 24rpx;
					}

					.select-icon {
						width: 70rpx;
						height: 70rpx;
						border-radius: 50%;
						background: #dddddd;
						display: flex;
						align-items: center;
						justify-content: center;
					}

				}

				.menu-info {
					width: 100rpx;
					height: 100rpx;
					background: #efefef;
					border-radius: 50%;
					display: flex;
					align-items: center;
					justify-content: center;
					margin-left: 30rpx;

					.icon-elipsis {
						font-size: 50rpx;
						color: #000;
					}
				}
			}

			.select-option {
				// display: none;
				position: absolute;
				background: #fff;
				top: 120rpx;
				width: calc(100% - 190rpx);
				padding: 30rpx;
				box-shadow: 0 0 30px 0 rgba(4, 29, 58, 0.10);
				border-radius: 40rpx;
				z-index: 99;

				.option-item {
					display: flex;
					height: 100rpx;
					line-height: 100rpx;
					padding: 0 20px;
					font-size: 24rpx;

					.option-item-icon {
						font-size: 40rpx;
					}

					.option-item-text {
						margin-left: 40rpx;
					}
				}

				.option-item.active {
					background: #efefef;
					border-radius: 40rpx;

				}
			}

			.select-option.show {
				-webkit-animation: bounce_scale_1 .8s ease-out;
			}

			.select-option.hide {
				display: none;
				// transition: all .5 ease-in-out;
				// -webkit-animation: bounce_scale_1 .8s ease-out;
			}

			.wrap-list {

				.list-item {
					padding: 30rpx;
					// background: chocolate;
					border-radius: 50rpx;
					margin-top: 30rpx;
					position: relative;

					.item-top {
						display: flex;

						.item-top-avatar {
							width: 100rpx;
							height: 100rpx;

							image {
								border-radius: 50%;
								width: 100%;
								height: 100%;
							}
						}

						.item-top-username {
							margin-left: 30rpx;
							line-height: 100rpx;
						}
					}

					.item-mid {
						padding: 10rpx;
						font-size: 26rpx;
						word-break: break-word;
					}

					.item-bottom {
						margin-top: 20rpx;
						display: flex;
						justify-content: space-between;

						.item-bottom-time {
							font-size: 24rpx;
						}

						.item-bottom-options {
							display: flex;

							.options-up,
							.options-down {
								width: 60rpx;
								height: 60rpx;
								border-radius: 50%;
								background: #fff;
								display: flex;
								align-items: center;
								justify-content: center;

							}

							.options-up {
								.icon-smile {
									font-size: 40rpx;
								}
							}

							.options-down {
								margin-left: 30rpx;

								.icon-cry {
									font-size: 40rpx;
								}
							}
						}
					}

					.item-delete {
						position: absolute;
						top: 20rpx;
						right: 30rpx;
					}
				}
			}
		}

		.back-top {
			position: fixed;
			right: 35rpx;
			bottom: 80rpx;
			width: 90rpx;
			height: 90rpx;
			border-radius: 50%;
			background: #c4fcef;
			display: flex;
			align-items: center;
			justify-content: center;
			box-shadow: 0 0 30px 0 rgba(4, 29, 58, 0.10);
		}

		.submit-icon {
			position: fixed;
			right: 35rpx;
			width: 90rpx;
			height: 90rpx;
			border-radius: 20rpx;
			background: #fdf8e2;
			display: flex;
			align-items: center;
			justify-content: center;
			box-shadow: 0 0 30px 0 rgba(4, 29, 58, 0.10);
			transition: all .5s ease-in-out;
		}

		.input-box {
			background: #fff;
			padding: 20rpx;
			position: fixed;
			bottom: 0rpx;
			width: 100%;
			height: 150rpx;
			display: flex;
			align-items: center;
			z-index: 999;

			.input {
				width: calc(100% - 200rpx);

				textarea {
					background: #efefef;
					min-height: 110rpx;
					max-height: 100rpx;
					padding: 20rpx;
					border-radius: 20rpx;
					width: 100%;
				}
			}

			.submit-btn {
				width: 100rpx;
				height: 100rpx;
				background: #efefef;
				display: flex;
				justify-content: center;
				align-items: center;
				border-radius: 50%;
				margin-left: 50rpx;
			}
		}
	}

	@-webkit-keyframes bounce_scale_1 {
		0% {
			opacity: 1;
			-webkit-transform: scale(0);
		}

		25% {
			-webkit-transform: scale(1.01);
		}

		40% {
			-webkit-transform: scale(0.9);
		}

		55% {
			-webkit-transform: scale(1);
		}

		70% {
			-webkit-transform: scale(1.01);
		}

		85%,
		100% {
			opacity: 1;
			-webkit-transform: scale(1);
		}
	}
</style>
